<template>
    <div>
        <h1 style="text-align: center;">分类列表</h1>
        <el-button type="primary" 
        v-permission="{path: '/cat/add', name: '分类添加'}"
        @click="oncatadd">新增分类</el-button>
        <el-table
        :data="catlist"
        style="width: 100%">
            <el-table-column
                prop="catname"
                label="分类名称"
                width="300">
            </el-table-column>
            <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                size="big"
                v-permission="{path: '/cat/edit', name: '分类修改'}"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                size="big"
                type="danger"
                v-permission="{path:'/cat/del', name:'分类删除'}"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>

        <!-- 分类编辑 -->
        <el-dialog
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <h1 style="text-align: center;">分类修改</h1>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="分类名称">
                    <el-input v-model="form.catname"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即修改</el-button>
                    <el-button @click="dialogVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
            
        </el-dialog>

        <!-- 分类添加 -->
        <el-dialog
            :visible.sync="dialogVisibles"
            width="30%"
            :before-close="handleClose">
            <h1 style="text-align: center;">分类添加</h1>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="分类名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onclick">立即新增</el-button>
                    <el-button @click="dialogVisibles=false">取消</el-button>
                </el-form-item>
            </el-form>
            
        </el-dialog>

    </div>
</template>

<script>
import { catList, catDel, catEdit, catAdd } from "@/request"
import permission from '@/utils/permission'
export default {
    directives:{
        permission
    },
    data () {
        return {
            dialogVisibles:false,
            dialogVisible:false,
            catlist:[],
            form:{
                name:'',
                catname:'',
                id:''
            }
        }
    },
    methods: {
        async GetCatList() {
            let data = await catList()
            this.catlist = data.data.catlist
            // console.log(this.catlist);
        },
        handleEdit(index,row) {
            this.dialogVisible=true
            // console.log(index,row);
            this.form.catname = row.catname
            this.form.id = row._id
        },
        async handleDelete(index,row) {
            this.$confirm('你真的要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    catDel(row._id).then(data =>{
                        let { error_code,msg } = data
                            if(error_code === 200 ){
                                this.$message({
                                    type: 'success',
                                    duration: 1500,
                                    message: msg,    
                                })
                            } else {
                                this.$message({
                                    type: 'error',
                                    duration: 1500,
                                    message: msg,
                                })
                            }
                            this.GetCatList()
                    }) 
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '停止删除'
                });          
            });
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        async onSubmit(){
            let data = await catEdit(this.form)
            // console.log(data);
            let {error_code, msg} = data
            if(error_code === 200) {
                // 给弹窗  清空表单数据 让表单隐藏 重新发请求 渲染用户列表
                this.$message({
                    type: 'success',
                    duration: 1500,
                    message: msg,
                    onClose: () => {
                        this.dialogVisible = false
                        this.GetCatList()
                    }
                })
            } else {
                this.$message({
                    type: 'error',
                    duration: 1500,
                    message: msg,
                })
            }
        },
        oncatadd(){
            this.dialogVisibles = true
        },
        async onclick(){
            this.form.catname = this.form.name
            let data = await catAdd(this.form)
            // console.log(data);
            // return
            let { error_code,msg } = data
            if(error_code = 200){
                this.$message({
                    message: msg,
                    duration: 1500,
                    type: 'success',
                    onClose: () => {
                        this.dialogVisibles = false
                        this.form.name=''
                        this.GetCatList()
                    }
                });
            } else {
                this.$message({
                    message: msg,
                    duration: 1500,
                    type: 'error',
                });
            }
        }
    },  
    created() {
        this.GetCatList()
    }
}
</script>

<style>
    
</style>
